<template>
	<view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog" style="background: #fff;">
				<view class="cu-bar bg-black justify-end">
					<view class="content">免责声明</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view   v-html="myconfig.b_mzsm"></view>
				</view>
				<view class="cu-bar bg-black justify-end">
					<view class="action">
						<button class="cu-btn line-yellow text-yellow" @tap="hideModal">取消</button>
						<button class="cu-btn bg-yellow margin-left" @tap="agree">同意</button>

					</view>
				</view>
			</view>
		</view>
		<view class="logo">
			<!-- <image class="bg" src="/static/my_bg.png"></image> -->
			<view class="img"> 
				<image :src="myconfig.logo" mode="widthFix"></image>
			<!-- <view class="text-center uni-h4">{{myconfig.name}}</view> -->
			</view>
		</view>
		<view class="form re">
			<view class="username" v-if="type==1">
				<view v-if="myconfig.needcode==1" class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input type="number" :placeholder="i18n.login.inputmobile" v-model="mobile" />
			</view>
			<view class="username" v-if="type==2">
				<view v-if="myconfig.needcode==1" class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode2()">{{getCodeText}}</view>
				<input type="text" :placeholder="i18n.login.inputemail" v-model="email" />
			</view>
			<view class="code" v-if="myconfig.needcode==1">
				<input type="number" :placeholder="i18n.login.verification" v-model="code" />
			</view>
			<view class="password">
				<input :placeholder="i18n.login.password" v-model="password" password=true />
			</view>
			<view class="password">
				<input :placeholder="i18n.login.password2" v-model="password2" type="number" />
			</view>
			<!-- <view class="password">
				<input :placeholder="i18n.login.repassword" v-model="repassword" password=true />
			</view> -->
			<view class="code" v-if="myconfig.is_tgno==1">
				<input type="text" :placeholder="i18n.login.inputtgno" v-model="tgno" />
			</view>
			<checkbox-group class="block" @change="RadioChange">
				<view class=" padding-sm uni-h6">
					<!-- <view class="title">同意 《免责声明条款》</view> -->
					<checkbox :class="radio=='1'?'checked':''" :checked="radio=='1'?true:false" value="1"></checkbox>
					
					<text class="text-gray margin-left-sm">我已理解并同意</text>
					<text @tap="showModal('DialogModal1')">《免责申明条款》</text>
					<text class="text-gray">的全部内容</text>
				</view>
			</checkbox-group>
			<!-- <view>  
				<view>
					<radio class='margin-left-sm' :class="radio=='1'?'checked':''" :checked="radio=='1'?true:false" value="1"></radio>
					同意 《免责声明条款》
				</view>
			</view -->
			<view class="btn" @tap="doReg" :disabled="logining">{{i18n.login.registration}}</view>
			<view class="res">
				<view @tap="toLogin">{{i18n.login.login}}</view>
				<view @tap="down">{{i18n.login.down}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				type: 2, //1 mobile 2 email
				email: "",
				mobile: "",
				code: '',
				password: "",
				password2: "",
				repassword: "",
				tgno: '',
				loginWay: 1,
				logining: false,
				getCodeText: '获取验证码',
				getCodeBtnColor: "#999999",
				getCodeisWaiting: false,
				radio: 0,
				modalName: null,
			}
		},
		computed: {
			...mapState({
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(option) {
			console.log(option)
			if (option.tgno) {
				this.tgno = option.tgno;
			}
			this.getCodeText = this.i18n.login.getcode;
		},
		onShow() {
			this.myConfig().catch(e => {})
		},
		methods: {
			...mapActions(['login', 'getCartProducts', 'getUserinfo', 'myConfig']),
			Timer() {},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) {
					uni.showToast({
						title: this.i18n.popup.errmobile,
						icon: "none"
					});
					return false;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"

				this.$http.post('index.code.get', {
					mobile: this.mobile,
					event: 'register'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			getCode2() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(this.email))) {
					uni.showToast({
						title: this.i18n.popup.erremail,
						icon: "none"
					});
					return false;
				}
				// this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				// this.getCodeBtnColor = "rgba(255,255,255,0.5)"

				this.$http.post('index.code.get2', {
					email: this.email,
					event: 'register'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.i18n.login.sendcode,
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = this.i18n.login.Reacquire + "(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#999999";
						this.getCodeText = this.i18n.login.getcode;
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = this.i18n.login.Reacquire + "(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			doReg() {
				uni.hideKeyboard()
				if (this.radio != 1) {
					uni.showToast({
						title: '请先阅读条款',
						icon: "none"
					});
					return false;
				}
				if (this.type == 1) {
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) {
						uni.showToast({
							title: this.i18n.popup.errmobile,
							icon: "none"
						});
						return false;
					}
				} else {
					this.loginWay = 3;
					if (!(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(this.email))) {
						uni.showToast({
							title: this.i18n.popup.erremail,
							icon: "none"
						});
						return false;
					}
				}

				if (this.password == '') {
					uni.showToast({
						title: this.i18n.login.password,
						icon: "none"
					});
					return false;
				}
				if (this.password2 == '') {
					uni.showToast({
						title: this.i18n.login.password2,
						icon: "none"
					});
					return false;
				}
				// if (this.password !== this.repassword) {
				// 	uni.showToast({
				// 		title: this.i18n.popup.repass,
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
				if (this.tgno == '' && this.myconfig.is_tgno == 1) {
					uni.showToast({
						title: this.i18n.login.inputtgno,
						icon: "none"
					});
					return false;
				}
				if (this.myconfig.needcode == 0) {
					this.code = '1234';
				}
				uni.showLoading({
					title: 'loading...'
				})
				this.logining = true;
				let sendData = {}
				const {
					mobile,
					email,
					password,
					password2,
					code,
					loginWay,
					tgno
				} = this
				sendData = {
					mobile,
					email,
					password,
					password2,
					code,
					loginWay,
					tgno
				}
				this.login(sendData).then(res => {
					this.logining = false
					uni.hideLoading();
					console.log(res)
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(e => {
					this.logining = false
				})

			},
			down() {
				uni.navigateTo({
					url: "/pages/public/down"
				})
			},
			toLogin() {
				uni.hideKeyboard()
				uni.navigateTo({
					url: "/pages/public/login"
				})
				// uni.redirectTo({
				// 	url: 'login'
				// });
				// uni.navigateBack();
			},
			RadioChange(e) {
				this.radio = e.detail.value
				console.log(this.radio == 1)
			},
			showModal(e) {
				this.modalName = e
			},
			hideModal(e) {
				this.modalName = null
			},
			agree() {
				this.radio = 1;
				this.modalName = null
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";
</style>
